:root {
  --gutter-x: 0.83333333%;
  --gutter-y: 0.5rem;
  --col-width: 7.5%;
}

div {
  overflow: hidden;
  white-space: nowrap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.bg {
  background: rgb(144, 179, 255);
}

.container {
  width: 90%;
  margin: 0 auto;
  padding-left: calc(var(--gutter-x));
  padding-right: calc(var(--gutter-x));
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: calc(var(--gutter-x));
  margin-top: calc(var(--gutter-y));
}

.col {
  background: rgb(245, 161, 161);
}

.col-1 {
  grid-column-end: span 1;
}

.col-2 {
  grid-column-end: span 2;
}

.col-2 {
  grid-column-end: span 2;
}

.col-3 {
  grid-column-end: span 3;
}

.col-4 {
  grid-column-end: span 4;
}

.col-5 {
  grid-column-end: span 5;
}

.col-6 {
  grid-column-end: span 6;
}

.col-7 {
  grid-column-end: span 7;
}

.col-8 {
  grid-column-end: span 8;
}

.col-9 {
  grid-column-end: span 9;
}

.col-11 {
  grid-column-end: span 11;
}

.col-12 {
  grid-column-end: span 12;
}

.offset-1 {
    grid-column-start: 1;
}

.offset-2 {
    grid-column-start: 2;
}

.offset-3 {
    grid-column-start: 3;
}

.offset-4 {
    grid-column-start: 4;
}

.offset-5 {
    grid-column-start: 5;
}

.offset-6 {
    grid-column-start: 6;
}

.offset-7 {
    grid-column-start: 7;
}

.offset-8 {
    grid-column-start: 8;
}

.offset-9 {
    grid-column-start: 9;
}

.offset-10 {
    grid-column-start: 10;
}

.offset-11 {
    grid-column-start: 11;
}

